<template>
    <div class="mainwrap" style="max-width:750px; margin:0 auto;left:50%;top:50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%)">
        <div class="my-header"><slot name="header"/></div>
        <div ref="myMain" class="my-main">
            <div ref="myContent" class="my-content">
                <slot/>
                <div class="btmsg" v-if="loading">
                    <template v-if="loading">
                        <van-loading size="14px" v-if="!end">加载中...</van-loading>
                        <span class="noData" v-else>{{overText||'已经到底了！'}}</span>
                    </template>
                </div>
            </div>
        </div>
        <div class="my-footer"><slot name="footer"/></div>
        <a v-if="showMenu" to="/member/index" class="linkToplate" @click="doFllow">
            <i class="iconfont iconguanzhu"></i>
        </a>
        <div v-if="shoWoverlay" class="ewmWrap" @click="shoWoverlay=false">
            <div class="ewmBox" @click.stop="">
              <img src="/images/ewm.jpg"/>
              <p>请长按二维码识别关注公众号！</p>
            </div>
        </div>
    </div>
</template>

<script>
import { Loading  as vanLoading,Dialog  } from "vant";
export default {
    props:{
        loading:{ // 是否开启盾冬到底部加载更多
            type:Boolean,
            default:()=>false // 默认不开启
        },
        offset:{  // 滚动条距离底部的距离小于该值就触发加载更多
            type:Number,
            default: 60
        },
        end:{  // 数据全部加载完成标志
            type:Boolean,
            default: false
        }, 
        load:Function,  //加载数据，由组件调用者传入， 此函数必须返回一个Promise对象
        overText:{
            type:String,
            default:'已经到底了！'
        },
        showMenu:{ 
            type:Boolean,
            default: false
        } 
    },
    components:{
        vanLoading
    },
    data(){
        return{
           wrap:null,
           con:null,
           shoWoverlay:false
        }
    },
    created(){
        
    },
    mounted(){
        this.$emit('eleLoadOver',{ele:this.$refs.myMain})  // 把元素传出去
        if(this.loading && !this.end){
            this.wrap = this.$refs.myMain
            this.con = this.$refs.myContent
            //setTimeout(()=>{
                //this.onBottomLoadInit()
                this.wrap.onscroll = ()=>{
                    this.onBottomLoadInit()
                }
            //},1000) 
        }
    },
    methods:{
        scrollInit(flag){
            this.wrap.onscroll = this.onBottomLoadInit(flag)
            // this.wrap.onscroll = ()=>{
            //     this.onBottomLoadInit()
            // }
        },
        async onBottomLoadInit(flag){
            const wrap_h = this.wrap.offsetHeight 
            const con_h = this.con.offsetHeight
            const wrap_sh = this.wrap.scrollTop
            //console.log(con_h - wrap_h - wrap_sh)
            if((con_h - wrap_h - wrap_sh) <=  this.offset || flag=='init'){
                //console.log("触发了")
                this.wrap.onscroll = null
                await this.load()
                if(!this.end){
                    this.wrap.onscroll = this.onBottomLoadInit
                }
            }
        },
        doFllow(){
            this.$store.dispatch("user/isSubscribe").then(res =>{
                if(res.data.subscribe==0){// 是否已关注公众号，0为未关注，1为已关注
                    this.shoWoverlay = true
                }else{
                    this.shoWoverlay = false
                    Dialog.confirm({
                        title: '提示信息',
                        confirmButtonText:'立即前往',
                        message: `您已经关注EJ在线公众号了，是否前往EJ在线平台?`,
                    })
                    .then(() => {
                        //this.$router.push('/member/index')
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .mainwrap{
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        .my-main{
            flex:1;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling : touch; 
            .btmsg{
                text-align: center;
                padding: 0 0 30px 0;
            }
            .noData{
                display: block;
                color:#999;
                text-align: center;
            }
        }
    }
    .linkToplate{
        position: fixed;
            z-index: 1000;
            width: 90px;
            height: 90px;
            right: 20px;
            bottom: 130px;
            background:#fff;
            border-radius: 50%; 
            color: #ababac;
            box-shadow: 0 0 10px #c9c9cb;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            i{
                font-size: 40px;
                margin:0;
                color: #239941;
            }
    }
    .ewmWrap{
        position:fixed;
        z-index: 1000;
        display: flex;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,0.5);
        justify-content: center;
        align-items: center; 
        .ewmBox{
          background: #fff;
          text-align: center;
          border-radius: 7px;
          img{
            width: 400px;
            height: 400px;
          }
          p{
            padding: 0 10px 40px 10px;
          }
        }
      }
</style>